<template>
    <div :style="{height:height + 'px', zIndex: zIndex }">
        <div
            :class="className"
            :style="{
                width: width,
                zIndex: zIndex,
                position: position,
                height: height + 'px',
                top: computedTop,
            }">
            <slot>
                
            </slot>
        </div>
    </div>
</template>
 
 
<script>
export default {
    name: "Sticky",
    props: {

        stickyTop: {
            type: Number,
            default: 0,
        },
        zIndex: {
            type: Number,
            default: 1,
        },
        className: {
            type: String,
            default: "",
        },
        container: {
           type: Object,
            default: () => ({}),
        }
    },
    data() {
        return {
            position: "",
            active: false,
            isStickyTop: false,
            isStickyBottom: false,
            width: undefined,
            height: undefined,
            containerTop: 0,
            containerBottom: 0
        };
    },
    watch: {
      container() {
        this.handleScroll()
        this.initEvent()
      }
    },
    computed: {
      computedTop() {
        if(this.isStickyTop) {
          return this.containerTop + 'px'
        }
         if(this.isStickyBottom) {
          const height = this.$el.clientHeight
          return this.containerBottom - height + 'px'
        }
        return ''
      }
    },
    mounted() {
       this.initEvent()
    },
 
    // 组件激活时调用
    activated() {
        this.handleScroll();
    },
 
    destroyed() {
        const container = this.container || window
        container.removeEventListener("scroll", this.handleScroll);
        container.removeEventListener("resize", this.handleResize);
    },
 
    methods: {
      initEvent() {
         this.height = this.$el.getBoundingClientRect().height;
         const container = this.container || window
         console.log(container.addEventListener)
         if(container.addEventListener) {
           container.addEventListener("scroll", this.handleScroll);
           container.addEventListener("resize", this.handleResize);
         }
      },
        sticky(direction) {
            if (this.active) {
                return;
            }
            this.active = true;
            if(direction === 'top') {
              this.isStickyTop = true;
            } else {
              this.isStickyBottom = true;
            }
            this.position = "fixed";
            this.width = this.width + "px";
        },
        handleReset() {
            if (!this.active) {
                return;
            }
            this.reset();
        },
        reset() {
            this.position = "";
            this.width = "auto";
            this.active = false;
            this.isStickyTop = false;
            this.isStickyBottom = false;
        },
        handleScroll() {
 
            // 粘性定位区域的宽度
            const width = this.$el.getBoundingClientRect().width;
            this.width = width || "auto";
 
            const container = this.container || window

            console.dir(this.$el.clientHeight)

            const containerTop = container.getBoundingClientRect().top
            const containerBottom = container.getBoundingClientRect().bottom


            this.containerTop = containerTop
            this.containerBottom = containerBottom

            // 粘性定位距屏幕顶部的高度
            const offsetTop = this.$el.getBoundingClientRect().top;
            const height = this.$el.clientHeight;
            console.log(offsetTop, containerBottom)

            // 如果滚动高度小于设定的定位高度
            if (offsetTop < containerTop) {
                this.sticky('top');
                console.log('top-sssss')
                return;
            };
            
            if (offsetTop > containerBottom - height) {
              console.log('bottom-sssdsd')
              this.sticky('bottom');
              return;
            };

            this.handleReset();
        },
 
        handleResize() {
            if (this.isSticky) {
                this.width = this.$el.getBoundingClientRect().width + "px";
            }
        },
    },
};
</script>